<template>
  <view class="container">
    <view class="input-box">
      <!-- 输入框 -->
      <view class="input">
        <u--input placeholder="账号" prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399" clearable
          v-model="userLoginName" maxlength="8">
        </u--input>
        <u--input placeholder="密码" prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" clearable
          type="password" v-model="userLoginPasswd" maxlength="14"></u--input>
      </view>

      <!-- 帮助--左边注册右边登录遇到问题 -->
      <view class="help">
        <view class="register" @click="goToRegister">
          <text>注册</text>
        </view>

        <view class="loginQuestion" @click="goToLoginQuestion">
          <text>登录遇到问题?</text>
        </view>
      </view>
    </view>

    <!-- 登录和取消按钮 -->
    <view class="login-btn">
      <view class="login">
        <u-button type="success" text="确定" @click="loginVerify()"></u-button>
      </view>
      <view class="cancel">
        <u-button type="error" text="取消" @click="quit"></u-button>
      </view>
    </view>

    <!-- 权限弹窗 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 用户登录账号密码
        userLoginName: '',
        userLoginPasswd: ''
      };
    },
    methods: {
      // 注册
      goToRegister() {
        uni.navigateTo({
          url: '/components/reg/reg'
        })
      },
      // 登录问题
      goToLoginQuestion() {
        uni.navigateTo({
          url: '/components/loginQuestion/loginQuestion'
        })
      },
      // 进行简单的登录校验
      loginVerify() {
        if (this.userLoginName !== '' && this.userLoginPasswd !== '') {
          this.login([this.userLoginName, this.userLoginPasswd])
        } else {
          this.$refs.uToast.show({
            type: 'error',
            position: 'top',
            icon: true,
            title: '失败主题',
            message: "用户名或密码为空 请重新输入",
            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
          });
        }
      },
      // 取消登录
      quit() {
        uni.navigateBack()
      },
      // 引入vuex中user模块的登录函数
      ...mapMutations('user', ['login'])
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 90%;
    height: 500rpx;
    margin: 0 auto;

    .input-box {
      width: 90%;
      margin: 0 auto;
      margin-top: 160rpx;


      .input {
        margin-top: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 2rpx 2rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);
      }

      .help {
        display: flex;
        justify-content: space-between;
        margin: 30rpx 20rpx;

        .register {
          font-size: 26rpx;
          color: blue;
        }

        .loginQuestion {
          font-size: 26rpx;
          color: #777;
          text-decoration: underline;
        }
      }
    }

    .login-btn {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: 0 auto;
      margin: 200rpx auto;


      .login {
        width: 280rpx;
      }

      .cancel {
        width: 280rpx;
      }
    }
  }
</style>
